<template>
    <div class="shopList">
        <dl v-for="(item,index) in shopList" @click="goToCommodity(item.cid)">
            <dt id="item.id">
                <img v-lazy="item.image" alt="">
            </dt>
            <dd>
                {{item.title}}
            </dd>
        </dl>
    </div>
</template>
<script>
    import {getShopList} from "../../api/list/list";

    export default {
        name:'ShopList',
        data(){
            return{
                shopList:[]
            }
        },
        created() {
            getShopList().then((res)=>{
                let data = res.data.data
                this.shopList = data
            })
        },
        methods:{
            goToCommodity(id){
                console.log(id)
            }
        }
    }
</script>
<style lang="less" scoped>
    .shopList{
        width: 100%;
        display: flex;
        margin-top: 0.2rem;
        background: white;
        padding: 0.1rem;
        box-sizing: border-box;
        dl{
            flex: 1;
            dt{
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                img{
                    width: 0.7rem;
                    height: 0.7rem;
                    display: block;
                }
            }
            dd{
                text-align: center;
            }
        }
    }
</style>